import React, { Component } from 'react';
import './color-palette.scss';

class ColorPalette extends Component {
    colors = [
        { 黑色: '#000' },
        { 白色: '#fff' },
        { 红色: '#ff0000' },
        { 绿色: '#00ff00' },
        { 蓝色: '#0000ff' },
    ];

    render() {
        return (
            <div className='color-palette'>
                <div
                    className='color-palette-container'
                    onChange={e => this.props.changeBrushColor(e.target.value)}
                >
                    {this.renderItem()}
                </div>
            </div>
        );
    }

    renderItem() {
        return this.colors.map(color => {
            const value = Object.values(color)[0];
            const title = Object.keys(color)[0];

            return (
                // <React.Fragment>
                <div key={value}>
                    <input
                        type='radio'
                        name='color-swatch'
                        value={value}
                        id={value}
                        defaultChecked={this.props.fontColor === value}
                    />
                    <label
                        className='color-item'
                        title={title}
                        htmlFor={value}
                        style={{ backgroundColor: value }}
                    />
                </div>
                // </React.Fragment>
            );
        });
    }
}

export default ColorPalette;
